<template>
<div class="list-view">
	<list-header
		:link="{name: 'home'}"
		:title="$t('Task.title')"
		:subtitle="$t('Task.subtitle')"
		></list-header>
	<div class="list-group-flush m-l-3">
		<div class="list-group-item">
			<p class="list-group-item-text text-light text-small">{{$t("Task.listHeader")}}</p>
		</div>
		<a
			class="list-group-item"
			v-link="{name: 'resultList', params: {taskId: task.taskId}}"
			v-for="task in taskList"
			track-by="taskId">
			<div class="pull-xs-left text-warning text-truncate version">{{task.version}}</div>
			<span class="pull-xs-right text-light">{{task.updatetime | date}}</span>
			<div class="name text-primary text-truncate">{{task.name}}</div>
		</a>
	</div>
</div>
</template>

<script>
import ListHeader from '../component/ListHeader.vue';
import {getTaskList} from '../resource';

export default {
	components: {ListHeader},
	data: function () {
		return {
			taskList: []
		};
	},
	route: {
		data: async function ({to}) {
			var taskList = await getTaskList(to.params.projectId);

			return {taskList};
		}
	}
}
</script>

<style scoped lang="postcss">
	.version {
		font-size: .75rem;
		line-height: 1.5rem;
		margin-left: -3rem;
		width: 3rem;
	}
</style>